<template>
  <view class="goods-base">
    <Form title="填写商品信息(必填)">
      <FormItem label="商品名称">
        <input v-model="formData.title" type="text" placeholder="请输入商品名称" @change="handleChangeForm" />
      </FormItem>
      <FormItem label="商品分类">
        <picker @change="bindPickerChange" :value="index" :range="array">
          <text>{{ array[index] || '请选择商品分类' }}</text>
        </picker>
      </FormItem>
      <FormItem :disabled="priceDisabled" label="价格(元)">
        <input
          v-model.number="formData.price"
          :disabled="priceDisabled"
          type="number"
          placeholder="请输入最多两位小数的价格"
          @blur="handleBlurPrice(formData)"
          @change="handleChangeForm"
        />
      </FormItem>
    </Form>
  </view>
</template>

<script>
import Form from "../../../components/public/Form/index.vue";
import FormItem from "../../../components/public/FormItem/index.vue";
import { mapState, mapMutations } from "vuex";
import schema from "async-validator";
import { maxPrice, priceMessage } from "../../../utils/validator";
export default {
  components: { Form, FormItem },
  props: {
    mode: {
      type: String,
      default: () => "add" // add modify
    }
  },
  data() {
    return {
      // array: ["荤菜", "素菜", "酒水"],
      index: null,
      formData: {
        title: "",
        price: "",
        catId: ""
      },
      rule: {
        title: {
          required: true
        }
      }
    };
  },
  computed: {
    ...mapState({
      menus: state => state.menus.menus,
      array() {
        return this.menus.map(v => v.name);
      },
      goodsInfo: state => state.goods.goodsInfo
    }),
    priceDisabled() {
      return this.goodsInfo &&
        this.goodsInfo.skuList &&
        this.goodsInfo.skuList[0] &&
        this.goodsInfo.skuList[0].spec
        ? true
        : false;
    }
  },
  watch: {
    // ["formData.title"](val, old) {
    //   this.SET_GOODS_INFO(this.formData);
    // },
    // ["formData.price"](val, old) {
    //   this.SET_GOODS_INFO(this.formData);
    // },
    // ["formData.catId"](val, old) {
    //   this.SET_GOODS_INFO(this.formData);
    // },
    // ["goodsInfo.skuList"](val, old) {
    //   if (val && Array.isArray(val)) {
    //     let prices = val.map(v => (v && v.price) || 0);
    //     this.formData.price = Math.min.apply(null, prices);
    //   }
    // }
  },
  created() {
    if (this.goodsInfo.id && this.mode == "modify") this.init();
    uni.$on(this.$consts.EMIT_TYPE.SET_SKU_LIST, res => {
      let skuList = res.skuList.filter(v => !v.isDelete);
      if (skuList && Array.isArray(skuList)) {
        let prices = skuList.map(v => (v && v.price) || 0);
        this.formData.price = Math.min.apply(null, prices);
      }
    });
  },
  methods: {
    ...mapMutations({
      SET_GOODS_INFO: "SET_GOODS_INFO"
    }),
    init() {
      for (const key in this.formData) {
        this.formData[key] = this.goodsInfo[key];
      }
      this.setCatId(this.goodsInfo.catId);
    },
    bindPickerChange(e) {
      this.index = e.target.value;
      this.formData.catId = this.menus[this.index].id;
      this.handleChangeForm();
    },
    getData() {
      return this.formData;
    },
    setData(formData) {
      this.formData = JSON.parse(JSON.stringify(formData));
    },
    setCatId(catId) {
      this.formData.catId = catId;
      this.index = this.menus.findIndex(v => v.id == catId);
    },
    handleBlurPrice(item) {
      if (item.price > maxPrice) {
        item.price = maxPrice;
        uni.showToast({
          icon: "none",
          title: priceMessage
        });
      }
      if (item.price || item.price === 0) {
        item.price = parseFloat(item.price.toFixed(2));
      }
    },
    handleChangeForm(key) {
      this.SET_GOODS_INFO(this.formData);
    }
  }
};
</script>

<style scoped lang="scss">
</style>
